(function() {
	let opt = {
		'type': 1,
		'pageShow': function() {},
		'pageHide': function() {},
		'useShakeDevice': {
			'speed': 30,
			'callback': function() {}
		},
		'useParallax': true,
		'useArrow': true,
		'useAnimation': true,
		'useMusic': {
			'autoPlay': true,
			'loopPlay': true,
			'src': 'https://link.hhtjim.com/163/1458033845.mp3'
		}
	};
	window.H5FullscreenPage = {
		init: function(option) {
			$.extend(opt, option);
			initDom(opt);
			initEvent(opt);
		}
	};

	let obj = {
		'1': {
			'upDrag': function(percentage, item) {
				let translateY = 1 - 0.7 * percentage; //位置系数，可以微调
				item.next().css('-webkit-transform', 'translate3d(0,' + translateY * 100 +
					'%,0)'); //下一个item上移动
			},
			'downDrag': function(percentage, item) {
				let translateY = -(0.7 * percentage);
				item.prev().css('-webkit-transform', 'translate3d(0,' + (translateY * 100 - 100) + '%,0)');
				item.css('-webkit-transform', 'translate3d(0,' + translateY * 100 + '%,0)'); //当前item下移动
			},
			'nextSlide': function(item) {
				item.css('-webkit-transform', 'translate3d(0,-100%,0)');
				item.next().css('-webkit-transform', 'translate3d(0,0,0)');
			},
			'prevSlide': function(item) {
				item.prev().css('-webkit-transform', 'scale(1)');
				item.css('-webkit-transform', 'translate3d(0,100%,0)');
			},
			'showSlide': function(item) {
				item.css('-webkit-transform', 'scale(1)');
				item.next().css('-webkit-transform', 'translate3d(0,100%,0)');
			}
		},
		'2': {
			'upDrag': function(percentage, item) {
				let scale = 1 - 0.2 * percentage; //缩放系数，可以微调
				let translateY = 1 - 0.7 * percentage; //位置系数，可以微调
				item.css('-webkit-transform', 'scale(' + scale + ')'); //当前item缩小
				item.next().css('-webkit-transform', 'translate3d(0,' + translateY * 100 +
					'%,0)'); //下一个item上移动
			},
			'downDrag': function(percentage, item) {
				let scale = 0.8 - 0.2 * percentage;
				let translateY = -(0.7 * percentage);
				item.css('-webkit-transform', 'translate3d(0,' + translateY * 100 + '%,0)'); //当前item下移动
				item.prev().css('-webkit-transform', 'scale(' + scale + ')'); //前一个item放大
			},
			'nextSlide': function(item) {
				item.css('-webkit-transform', 'scale(.8)');
				item.next().css('-webkit-transform', 'translate3d(0,0,0)');
			},
			'prevSlide': function(item) {
				item.prev().css('-webkit-transform', 'scale(1)');
				item.css('-webkit-transform', 'translate3d(0,100%,0)');
			},
			'showSlide': function(item) {
				item.css('-webkit-transform', 'scale(1)');
				item.next().css('-webkit-transform', 'translate3d(0,100%,0)');
			}
		},
		'3': {
			'upDrag': function(percentage, item) {
				let translateY = 1 - 0.4 * percentage; //位置系数，可以微调
				item.css('-webkit-transform', 'translate3d(0,' + (translateY * 100 - 100) + '%,0)');
				item.next().css('-webkit-transform', 'translate3d(0,' + translateY * 100 +
					'%,0)'); //下一个item上移动
			},
			'downDrag': function(percentage, item) {
				let translateY = -(0.4 * percentage);
				item.prev().css('-webkit-transform', 'translate3d(0,' + (translateY * 100 - 100) + '%,0)');
				item.css('-webkit-transform', 'translate3d(0,' + translateY * 100 + '%,0)'); //当前item下移动
			},
			'nextSlide': function(item) {
				item.css('-webkit-transform', 'translate3d(0,-100%,0)');
				item.next().css('-webkit-transform', 'translate3d(0,0,0)');
			},
			'prevSlide': function(item) {
				item.prev().css('-webkit-transform', 'scale(1)');
				item.css('-webkit-transform', 'translate3d(0,100%,0)');
			},
			'showSlide': function(item) {
				item.css('-webkit-transform', 'scale(1)');
				item.next().css('-webkit-transform', 'translate3d(0,100%,0)');
			}
		},
		'4': {
			'upDrag': function(percentage, item) {
				let translateY = 1 - 0.4 * percentage; //位置系数，可以微调
				item.css('-webkit-transform', 'translate3d(0,' + (translateY * 100 - 100) + '%,0)');
				item.next().css('-webkit-transform', 'translate3d(0,' + translateY * 100 +
					'%,0)'); //下一个item上移动
			},
			'downDrag': function(percentage, item) {
				let translateY = -(0.4 * percentage);
				item.prev().css('-webkit-transform', 'translate3d(0,' + (translateY * 100 - 100) + '%,0)');
				item.css('-webkit-transform', 'translate3d(0,' + translateY * 100 + '%,0)'); //当前item下移动
			},
			'nextSlide': function(item) {
				item.addClass('zindex');
				setTimeout(function() {
					item.removeClass('no-animation').css('-webkit-transform',
						'translate3d(0,-100%,0)');
					item.next().removeClass('zindex').addClass('no-animation').css(
						'-webkit-transform', 'translate3d(0,0,0)');
				}, 100);

			},
			'prevSlide': function(item) {

				item.prev().css('-webkit-transform', 'translate3d(0,0,0)');
				item.next().css('-webkit-transform', 'translate3d(0,100%,0)');
				item.removeClass('zindex');
			},
			'showSlide': function(item) {
				item.css('-webkit-transform', 'scale(1)');
				item.next().css('-webkit-transform', 'translate3d(0,100%,0)');
			}
		}
	};
	let dragThreshold = 0.15; //临界值
	let dragStart = null; //开始抓取标志位
	let percentage = 0; //拖动量的百分比
	let currentItem;

	function touchStart(event) {
		if (dragStart !== null) return;
		let item = $(event.target).closest('.item');
		if (!item.length) {
			$('.overlay').hide();
			return;
		}
		if (event.touches) {
			event = event.touches[0];
		}
		//抓取时的所在位置
		dragStart = event.clientY;

		//分别关闭item的动画效果,动画效果只在松开抓取时出现
		item.addClass('no-animation');
		item.next().addClass('no-animation');
		item.prev().addClass('no-animation');

	}

	function touchMove(event) {
		//console.log(33);
		//防止ios拖动事件
		event.preventDefault();

		if (dragStart === null) return;
		let item = $(event.target).closest('.item');
		if (!item.length) {
			$('.overlay').hide();
			return;
		}
		if (event.touches) {
			event = event.touches[0];
		}
		//得到抓取开始时于进行中的差值的百分比
		percentage = (dragStart - event.clientY) / window.screen.height; //

		if (percentage > 0) {
			// //向上拖动
			let scale = 1 - 0.5 * percentage; //缩放系数，可以微调
			// let translateY = 1 - 0.4*percentage;//位置系数，可以微调
			// $(event.target).css('-webkit-transform', 'scale('+scale+')');//当前item缩小
			// $(event.target).next().css('-webkit-transform', 'translateY('+translateY*100+'%)'); //下一个item上移动
			//$(event.target).css('opacity', ''+scale+'');//当前item缩小
			obj[opt.type].upDrag(percentage, item);

		} else if (item.prev()) {
			//向下拖动
			// let scale = 0.8 - 0.2*percentage;
			// let translateY = -(0.4*percentage);
			// $(event.target).css('-webkit-transform', 'translateY('+translateY*100+'%)');//当前item下移动
			// $(event.target).prev().css('-webkit-transform', 'scale('+scale+')');//前一个item放大
			obj[opt.type].downDrag(percentage, item);
		}

	}

	function touchEnd(event) {
		//防止多次滚动，故增加一个覆盖层
		$('.overlay').show();
		dragStart = null;
		let item = $(event.target).closest('.item');
		if (!item.length) {
			$('.overlay').hide();
			return;
		}
		item.removeClass('no-animation');
		item.next().removeClass('no-animation');
		item.prev().removeClass('no-animation');

		//抓取停止后，根据临界值做相应判断
		if (percentage >= dragThreshold) {
			nextSlide(item);
		} else if (Math.abs(percentage) >= dragThreshold) {
			prevSlide(item);
		} else {
			showSlide(item);
		}
		//重置percentage
		percentage = 0;

	}

	function swipeUp(event) {
		let item = $(event.target).closest('.item');
		if (!item.length) {
			return;
		}
		nextSlide(item);
		//$(event.target).css('-webkit-transform', 'translateY(-101%)'); 
		//$(event.target).next().css('-webkit-transform', 'translateY(0)'); 
	}

	function swipeDown(event) {
		let item = $(event.target).closest('.item');
		if (!item.length) {
			return;
		}
		prevSlide(item);
		//$(event.target).css('-webkit-transform', 'translateY(101%)'); 
		//$(event.target).prev().css('-webkit-transform', 'translateY(0)'); 
	}

	function nextSlide(item) {
		//$(event.target).removeClass('parallax-item');
		//恢复到原样，或者展示下一item
		if (item.next().length) {
			item.attr('state', 'prev');
			item.siblings('.item').removeAttr('state');

			currentItem = item.next();
			currentItem.attr('state', 'next');

			orderPart(item.next());
			obj[opt.type].nextSlide(item);
		} else {
			obj[opt.type].showSlide(item);
		}

	}

	function prevSlide(item) {
		//$(event.target).removeClass('parallax-item');
		if (item.prev().length) {

			item.attr('state', 'prev');
			item.siblings('.item').removeAttr('state');
			currentItem = item.prev();
			currentItem.attr('state', 'next');
			obj[opt.type].prevSlide(item);
		} else {
			obj[opt.type].showSlide(item);
		}

	}

	function showSlide(item) {
		//$(event.target).removeClass('parallax-item');
		obj[opt.type].showSlide(item);
	}

	function initDom(opt) {
		$('body').addClass('H5FullscreenPage');
		currentItem = $('.item').first();
		currentItem.attr('state', 'next');
		if (opt.useAnimation) {
			let items = $('.item');
			items.find('.part').addClass('hide');
			orderPart(items.first());
		}
		$('body').append('<div class="overlay"></div>');
		if (opt.useArrow) {
			$('.item').slice(0, $('.item').length - 1).append('<span class="arrow"></span>');
		}
		if (opt.useMusic) {
			let autoplay = opt.useMusic.autoPlay ? 'autoplay="autoplay"' : '';
			let loopPlay = opt.useMusic.loopPlay ? 'loop="loop"' : '';
			let src = opt.useMusic.src;
			$('body').append('<span class="music play"><audio id="audio" src=' + src + ' ' + autoplay + ' ' +
				loopPlay + '></audio></span>');
		}
	}

	function orderPart(dom) {
		let parts = $(dom).find('.part');
		parts.forEach(function(item) {
			let time = $(item).attr('data-delay') || 100;
			setTimeout(function() {
				$(item).removeClass('hide');
			}, time);
		});
	}

	function initEvent(opt) {
		if (opt.useParallax) {
			let orginData = {
				x: 0,
				y: 0
			};
			window.addEventListener('deviceorientation', function(event) {
				let gamma = event.gamma;
				let beta = event.beta;

				let x = -gamma;
				let y = -beta;

				if (Math.abs(Math.abs(x) - Math.abs(orginData.x)) < 0.1 || Math.abs(Math.abs(y) - Math.abs(
						orginData.y)) < 0.1) {
					orginData.x = x;
					orginData.y = y;
					return;
				} else {
					orginData.x = x;
					orginData.y = y;
				}

				let halfWidth = window.innerWidth / 2;
				let halfHeight = window.innerHeight / 2;

				let max = 5;
				let items = $('.parallax');
				items.forEach(function(item) {
					let dx = (item.getBoundingClientRect().width / max) * (x / halfWidth);
					let dy = (item.getBoundingClientRect().width / max) * (y / halfHeight);

					if ($(item).hasClass('item')) {
						//$(item).addClass('parallax-item');
						dx = -dx / 1 + 50;
						dy = -dy / 1 + 50;
						item.style['background-position'] = '' + dx + '% ' + dy + '%';
						//$(item).removeClass('parallax-item');
					} else {
						item.style['transform'] = item.style['-webkit-transform'] = 'translate3d(' +
							dx + 'px,' + dy + 'px,0)';
					}
				});
			}, false);
		}
		if (opt.useShakeDevice && opt.useShakeDevice.speed) {
			let x = y = z = lastX = lastY = lastZ = 0;
			if (window.DeviceMotionEvent) {
				window.addEventListener('devicemotion', function(eventData) {
					let acceleration = event.accelerationIncludingGravity;
					x = acceleration.x;
					y = acceleration.y;
					z = acceleration.z;
					if (Math.abs(x - lastX) > opt.useShakeDevicespeed || Math.abs(y - lastY) > opt
						.useShakeDevicespeed || Math.abs(z - lastZ) > opt.useShakeDevicespeed) {
						//shake
						opt.useShakeDevice.callback && opt.useShakeDevice.callback(currentItem);

					}
					lastX = x;
					lastY = y;
					lastZ = z;
				}, false);
			}
		}
		$('.music').on('tap', function() {
			$(this).toggleClass('play');
			let audio = document.getElementById('audio');
			if (audio.paused) {
				audio.play();
			} else {
				audio.pause();
			}
		});
		// 绑定事件
		$(document).on('touchmove', function(e) {
			e.preventDefault();
		});
		if (opt.type > 4) {
			opt.type = opt.type - 4;
			$('.item').on({
				'swipeUp': swipeUp,
				'swipeDown': swipeDown
			});
		} else {
			$('.item').on({
				'touchstart': touchStart,
				'touchmove': touchMove,
				'touchend': touchEnd,
				'touchcancel': touchEnd,
				mousedown: touchStart,
				mousemove: touchMove,
				mouseup: touchEnd
			});
		}

		$('.item').on('tap', function() {
			//覆盖层隐藏
			$('.overlay').hide();
		});
		$('.item').on('transitionend webkitTransitionEnd', function(event) {
			//覆盖层隐藏
			$('.overlay').hide();
			//console.log($(event.target).attr('state'));
			if ($(event.target).attr('state') == 'next') {
				opt.pageShow(event.target);
			} else {
				opt.pageHide(event.target);
			}
			// opt.pageComplete(event.target);
			// debugger;
		});
		$('.overlay').on('tap', function() {
			//覆盖层隐藏
			$('.overlay').hide();
		});
	}

})();
